<template>
	<view class="container">
		<z-paging class="zPagingCircle" ref="paging" :auto="false" :loading-more-enabled="isMore" :hide-empty-view="!isMore" @onRefresh="onRefresh" @query="query" v-model="list" :empty-view-style="{ 'margin-bottom': '100rpx' }">
			<view class="headerCard">
				<view class="headerCard-t">
					<view class="headerCard-l">
						<view class="balance" @click="">
							<view>
								<text>日成员数</text>
							</view>
							<view class="amount">
								<text>{{ circleManageInfo.cy || 0 }} 人</text>
							</view>
						</view>
						<view class="balance income">
							<view>
								总成员数
							</view>
							<view class="amount">
								<text>{{ circleManageInfo.cy_sun || 0 }} 人</text>
							</view>
						</view>
					</view>
				</view>

				<view class="headerCard-t">
					<view class="headerCard-l">
						<view class="balance" @click="">
							<view>
								<text>日访问量</text>
							</view>
							<view class="amount">
								<text>{{ circleManageInfo.fw || 0 }} 人</text>
							</view>
						</view>
						<view class="balance income">
							<view>
								总访问量
							</view>
							<view class="amount">
								<text>{{ circleManageInfo.fw_sun || 0 }} 人</text>
							</view>
						</view>
					</view>
				</view>
				<view class="headerCard-t">
					<view class="headerCard-l">
						<view class="balance" @click="">
							<view>
								<text>日分享量</text>
							</view>
							<view class="amount">
								<text>{{ circleManageInfo.fx || 0 }} 人</text>
							</view>
						</view>
						<view class="balance income">
							<view>
								总分享量
							</view>
							<view class="amount">
								<text>{{ circleManageInfo.fx_sun || 0 }} 人</text>
							</view>
						</view>
					</view>
				</view>
				<view class="headerCard-t">
					<view class="headerCard-l">
						<view class="balance" @click="">
							<view>
								<text>日业务量</text>
							</view>
							<view class="amount">
								<text>￥{{ circleManageInfo.yw || 0 }}</text>
							</view>
						</view>
						<view class="balance income">
							<view>
								总业务量
							</view>
							<view class="amount">
								<text>￥{{ circleManageInfo.yw_sun || 0 }}</text>
							</view>
						</view>
					</view>
				</view>

				<view class="headerCard-b">
					{{circleManageInfo.text || ''}}
				</view>
				<view class="headerCard-vip" v-if="circleManageInfo.expiration_date">
					<image :src="ossUrl + '/static/image/t.png'" mode=""></image>
					{{circleManageInfo.expiration_date || ''}}
				</view>
			</view>


			<view class="tab">
				<view class="tab-list" @click="setCurrent(1)">
					<view :class="current === 1 ? 'ac' : ''">
						成员管理
					</view>
				</view>
				<view class="tab-list" @click="setCurrent(2)">
					<view :class="current === 2 ? 'ac' : ''">
						访问数据
					</view>
				</view>
				<!-- <view class="tab-list" @click="setCurrent(3)">
					<view :class="current === 3 ? 'ac' : ''">
						私信记录
					</view>
				</view> -->
				<view class="tab-list" @click="setCurrent(4)">
					<view :class="current === 4 ? 'ac' : ''">
						带货榜单
					</view>
				</view>
				<view class="tab-list" @click="setCurrent(5)">
					<view :class="current === 5 ? 'ac' : ''">
						圈子设置
					</view>
				</view>
			</view>
			<view style="margin: 0 30rpx 20rpx;" v-if="current != 5">
				<u-search placeholder="关键字进行筛选" :clearabled="true" :showAction="false" bgColor="#fff" v-model="params.name"></u-search>
			</view>
			<view class="date" v-if="current === 2">
				<view :class="filter === 1 ? 'ac' : ''" @click="setFilter(1)">日访问量</view>
				<view :class="filter === 2 ? 'ac' : ''" @click="setFilter(2)">月访问量</view>
			</view>
			<MenberManagement v-if="current === 1" v-model="list" :userInfo="userInfo" :info="info" @reload="reload"/>
			<CircleManagement v-if="current === 5" :userInfo="userInfo" @preview="is_show = false"/>
			<SalesRanking v-if="current === 4" v-model="list" :userInfo="userInfo" :info="info" @reload="reload"/>
			<shareDataVue v-if="current === 2" v-model="list" :userInfo="userInfo" :info="info" @reload="reload"/>
		</z-paging>

	</view>
</template>

<script>
	import CircleManagement from './circleManagement.vue';
	import MenberManagement from './memberManagement.vue'
	import SalesRanking from './sales-ranking.vue'
	import shareDataVue from './share-data.vue';
	import {
		InformationMyIncome,
		InformationWithdrawalDetails,
		InformationUserInfo,
		InformationOfficialAccount,
		InformationBusinessCard,
		gzhewm,
		circle_member_list,
		InformationLianchuangData,
		circle_manage,
		sale_order,
		sale_visit
	} from '@/common/http/api.js'
	export default {
		components: {
			MenberManagement,
			CircleManagement,
			SalesRanking,
			shareDataVue
		},
		data() {
			return {
				current: 1,
				userInfo: {},
				list: [],
				params: {
					name: ''
				},
				info: '',
				circleManageInfo: {},
				filter: 1, //1日 2月
				is_show: true
			};
		},
		computed:{
			isMore(){
				return ![5].includes(this.current)
			}
		},
		onLoad(e){
			if(e.near>0){
				uni.showModal({
					title:'提示',
					title:'您的圈子即将到期',
					cancelText:"再想想",
					confirmText:"立即续费",
					success: (res) => {
						if(res.confirm){
							uni.navigateTo({
								url: "/pagesA/beforeCreateCircle/beforeCreateCircle?cid=" + e.circleId + '&ctype=' +
									e.circleType
							})
						}
						
					}
				})
			}
		},
		onShow() {
			if(this.is_show === false) {
				this.is_show = true
				return
			}
			InformationUserInfo().then(res => {
				this.userInfo = res.data
				this.reload()
				uni.setNavigationBarTitle({
				　　title:res.data.circle_name || '圈子管理'
				})
				
				circle_manage({circle_id: res.data.circle_id}).then(res=>{
					this.circleManageInfo = res.data
				})
			})
			
			
		},
		watch:{
			'params.name': {
				handler(val){
					this.reload()
				}
			}
		},
		methods: {
			setFilter(e) {
				this.filter = e
				this.reload()
			},
			setCurrent(e) {
				this.current = e;
				this.reload()
			},
			/**
			 * 分页
			 * @param {Object} pageNo 页码
			 * @param {Object} pageSize 数量
			 */
			query(pageNo, pageSize) {
				console.log('触底', pageNo, pageSize)
				//this.onReachBottomReset()
				let token = uni.getStorageSync('token')
				if (!token) return
				this.init(pageNo, pageSize)
			},
			// 下拉刷新被触发
			onRefresh() {
				console.log('下拉刷新')
				//this.reload(true)
				// if (this.params.type === 2 || this.params.type === 4) {
				// 	this.$refs.FindVueRef.reload()
				// }
			},
			init(pageNo = 1, pageSize) {
				const params = {
					...this.params,
					page: pageNo
				}
				this.loading = true
				switch (this.current){
					case 1:
						circle_member_list({...params, circle_id: this.userInfo.circle_id}).then(res=>{
							this.info = res.data
							this.$refs.paging.complete(res.data.now);
						}).catch(err => {
							this.$refs.paging.complete(false);
						})
						break;
					case 2:
						sale_visit({...params, circle_id: this.userInfo.circle_id,filter: this.filter}).then(res=>{
							this.info = res.data
							this.$refs.paging.complete(res.data);
						}).catch(err => {
							this.$refs.paging.complete(false);
						})
						break;
					case 4:
						sale_order({...params, circle_id: this.userInfo.circle_id, nickname: this.params.name}).then(res=>{
							this.info = res.data
							this.$refs.paging.complete(res.data);
						}).catch(err => {
							this.$refs.paging.complete(false);
						})
						break;
					default:
					this.$refs.paging.complete(Array.from({ length: 1 }, () => ({})));
						break;
				}
				
				console.log('params', params, this.params, this.current)
			},
			reload() {
				//this.list = []
				this.$refs.paging.reload();
			},
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #f7f7f7;
		min-height: 100vh;

		.tab {
			width: 100%;
			box-sizing: border-box;
			padding: 0 30rpx;
			height: 80rpx;
			// border-radius: 20rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			display: flex;
			margin-bottom: 45rpx;
			position: sticky;
			top: 0;
			z-index: 999;
			background: #F7F7F7;
			.tab-list {
				flex: 1;
				min-width: 0;
				display: flex;
				align-items: center;
				justify-content: center;

				view {
					height: 100%;
					font-family: PingFang;
					font-weight: 500;
					font-size: 30rpx;
					color: #131313;
					display: flex;
					align-items: center;
				}

				.ac {
					font-family: PingFang;
					font-weight: 800;
					font-size: 34rpx;
					position: relative;
				}

				.ac::after {
					content: "";
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					margin: auto;
					width: 50rpx;
					height: 6rpx;
					background: #12B475;
				}
			}
		}

		.headerCard {
			width: 690rpx;
			margin: 0 auto;
			background-color: #5DC286;
			border-radius: 20rpx;
			font-size: 26rpx;
			text {
				font-weight: bold;
			}
			.headerCard-t {
				background: #51B376;
				
				box-sizing: border-box;
				
				
				overflow: hidden;
				padding: 40rpx 20rpx 20rpx;

				.headerCard-l {
					color: #fff;
					display: grid;
					grid-template-columns: repeat(2,1fr);
					grid-row-gap: 30rpx;
					view {
						text-align: center;
					}
					.amount {
						margin-top: 20rpx;
					}
				}
			}
			.headerCard-t:first-child{
				border-top-right-radius: 20rpx;
				border-top-left-radius: 20rpx;
			}
			.headerCard-t:nth-child(2n) {
				background: #57B67E;
				border-radius: 0;
			}

			.headerCard-m {
				color: #fff;
				margin: 20rpx;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #fff;
				display: grid;
				grid-template-columns: repeat(3,1fr);
				grid-row-gap: 30rpx;
				.amount {
					margin-top: 20rpx;
				}
			}

			.headerCard-b {
				padding: 20rpx;
				color: #D5EFE3;
				font-size: 24rpx;
			}
			.headerCard-vip {
				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
				padding: 20rpx 0;
				border-bottom-right-radius: 20rpx;
				border-bottom-left-radius: 20rpx;
				background: #318857;
				color: #dbdcdb;
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				text {
					margin-left: 20rpx;
					font-weight: unset;
				}
			}
		}
	}
	.date {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx;
		display: grid;
		grid-template-columns: repeat(2,1fr);
		grid-gap: 30rpx;
		view {
			flex: 1;
			min-width: 0;
			border-radius: 15rpx;
			background: #999;
			color: #fff;
			padding: 20rpx 0;
			text-align: center;
		}
		.ac {
			background: $u-warning;
		}
	}
</style>